<template>
  <!-- 结账 -->
  <div class="checkout">
    <div class="mask"></div>
    <div class="checkoutMain">
      <div>
        <p>结账</p>
        <i class="el-icon-close" @click="handleCloseInvoicing"></i>
      </div>
      <div class="money">
        <span>
          <p class="blue">{{ shouldAmount }}</p>
          <p>应付总额</p>
        </span>
        <span>
          <p>{{ totalUnpaid }}</p>
          <p>未付总额</p>
        </span>
        <span>
          <p>{{ totalAmount }}</p>
          <p>已付总额</p>
        </span>
        <span>
          <p>{{ rowVIPData.balance || 0 }}</p>
          <p>卡内余额</p>
        </span>
      </div>

      <div class="pay">
        <p>付款方式</p>

        <el-select
          class="w160"
          v-model="paymentName"
          placeholder="请选择"
          @change="hanldeChangePay"
        >
          <el-option
            v-for="(item, _index) in payMethodsList"
            :key="item.id"
            :label="item.name"
            :value="_index"
          >
          </el-option>
        </el-select>
        <p>支付</p>
        <el-input
          class="w160"
          @keyup.enter.native="hanldeContinueClick"
          type="number"
          v-model.number="paymentMoney"
        ></el-input>
        <el-button @click="hanldeContinueClick">继续</el-button>
        <!-- <p>备注</p>
        <el-input class="w160"></el-input> -->
      </div>

      <div class="table">
        <div>
          <div>
            <p>付款方式</p>
            <template v-if="choosePayMethodsList.length">
              <p v-for="(item, _index) in choosePayMethodsList" :key="_index">
                {{ item.paymentName }}
              </p>
            </template>
            <template v-else>
              <p>-</p>
            </template>
          </div>
          <div>
            <p>付款金额</p>
            <template v-if="choosePayMethodsList.length">
              <p v-for="(item, _index) in choosePayMethodsList" :key="_index">
                {{ item.paymentMoney }}
              </p>
            </template>
            <template v-else>
              <p>-</p>
            </template>
          </div>
        </div>
        <div>
          <div>
            <p>积分</p>
            <p>{{ integralData.integralNumber || '-' }}</p>
          </div>
          <div>
            <p>积分兑换</p>
            <p>{{ integralData.exchangeIntegral || '-' }}</p>
          </div>
          <!-- <div>
            <p>现金卷</p>
            <p>-</p>
          </div> -->
        </div>
      </div>

      <div class="btn">
        <el-button @click="hanldeEmpty">清空</el-button>
        <el-button type="primary" @click="handleConfirmClick">确定</el-button>
      </div>
    </div>
    <!-- 密码弹框 -->
    <password
      v-if="isPassword"
      :vipPhone="vipPhone"
      @handleClosePassword="handleClosePassword"
      @passwordCorrect="handlePasswordCorrect"
    ></password>
  </div>
</template>

<script>
import {
  getPayMethods,
  getVipIntegral,
  updateStatus,
  verifyPassword
} from '@/request/store/K_storeSalesQuery'
import password from './password.vue'
export default {
  components: { password },
  props: {
    // vip: {
    //   type: String,
    //   default() {
    //     return '13712161549'
    //   }
    // },
    shouldAmount: {
      type: [String, Number],
      require: true,
      default: 0
    },
    rowData: {
      type: Object,
      require: true,
      default() {
        return {}
      }
    },
    rowVIPData: {
      type: Object,
      require: true,
      default: () => {}
    },
    vipSellSequence: {
      type: String,
      require: true,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      paymentNo: null,
      paymentName: null,
      // vip: '13712161549',
      payMethodsList: [], // 付款方式
      chooseList: {},
      tempPyMethodsList: [], // 临时保存付款方法
      choosePayMethodsList: [], // 选择付款方法
      integralData: {}, // 积分兑换
      paymentMoney: '',
      isPassword: false,
      itemNo: '',
      isPasswordCorrect: false, // 输入密码后的状态
      questData: {}
    }
  },
  created() {
    this.getPayMethods()
    this.vipPhone = this.rowVIPData.phone
  },
  computed: {
    // 已付金额
    totalAmount() {
      return this.choosePayMethodsList.reduce((pre, item) => {
        return parseInt(pre + item.paymentMoney)
      }, 0)
    },
    // 未付金额
    totalUnpaid() {
      let shouldAmount = new this.$bigNumber(this.shouldAmount)
      let totalAmount = shouldAmount.minus(this.totalAmount)
      return totalAmount
    }
  },
  methods: {
    // 确认付款
    async handleConfirmClick() {
      // return
      let temp = JSON.stringify(this.choosePayMethodsList)
      if (temp == '{}') return this.$message.error('请选择付款方式')
      if (!this.paymentMoney) return this.$message.error('请输入付款金额')
      // return
      const { data } = await updateStatus(this.choosePayMethodsList)
      if (data && data.code === 200) {
        this.$message.success(data.msg)
        this.handleCloseInvoicing()
        this.$emit('handleConfirmClick')
      }
    },

    // 查询积分
    async getVipIntegral() {
      const quertData = {
        paymentNo: this.paymentNo,
        vip: this.rowData.vip
      }
      const { data } = await getVipIntegral(quertData)
      if (data && data.code === 200) {
        this.integralData = data.data
      }
      // console.log(this.integralData)
    },
    // 查询付款方式
    async getPayMethods() {
      const { data } = await getPayMethods()
      if (data && data.code === 200) {
        this.payMethodsList = data.data

        // 设置默认值
        let item = this.payMethodsList[0]
        this.paymentNo = item.no
        this.paymentName = item.name
        this.chooseList = JSON.parse(JSON.stringify(item))
        this.itemNo = item.no
      }
    },
    // 继续
    hanldeContinueClick() {
      let chooseList = JSON.stringify(this.chooseList)
      if (chooseList == '{}') return this.$message.error('请选择付款方式')
      chooseList = JSON.parse(chooseList)
      this.chooseList = chooseList
      chooseList.paymentMoney = this.paymentMoney

      if (this.itemNo === '002' || this.itemNo === '003') {
        if (this.paymentMoney) {
          if (this.isPasswordCorrect) {
            // 密码输入返回的状态
            this.questData = {
              id: this.chooseList.id,
              paymentMoney: this.chooseList.paymentMoney,
              paymentName: this.chooseList.name,
              paymentNo: this.chooseList.no,
              sellSequence: this.vipSellSequence
            }
            // 将一些相同的付款方式合并
            this.tempPyMethodsList.push(this.questData)
            this.choosePayMethodsList = this.getNewGoodsList(
              this.tempPyMethodsList
            )
          } else {
            this.isPassword = true
          }
        } else {
          this.$message.error('请输入付款金额')
        }
      } else {
        // 不是余额支付
        if (!this.paymentMoney) return this.$message.error('请输入付款金额')
        this.questData = {
          id: this.chooseList.id,
          paymentMoney: this.chooseList.paymentMoney,
          paymentName: this.chooseList.name,
          paymentNo: this.chooseList.no,
          sellSequence: this.vipSellSequence
        }
        // 将一些相同的付款方式合并
        this.tempPyMethodsList.push(this.questData)
        this.choosePayMethodsList = this.getNewGoodsList(this.tempPyMethodsList)
      }
    },
    getNewGoodsList(params) {
      let temp = {}
      for (let i in params) {
        let key = params[i].id //判断依据
        if (temp[key]) {
          // 旧数据
          temp[key].id = params[i].id
          temp[key].paymentMoney = params[i].paymentMoney //相加值
          temp[key].paymentName = params[i].paymentName
          temp[key].paymentNo = params[i].paymentNo
          temp[key].sellSequence = params[i].sellSequence
        } else {
          // 新数据
          temp[key] = {}
          temp[key].id = params[i].id
          temp[key].paymentMoney = params[i].paymentMoney
          temp[key].paymentName = params[i].paymentName
          temp[key].paymentNo = params[i].paymentNo
          temp[key].sellSequence = params[i].sellSequence
        }
      }
      let newArry = []
      for (let k in temp) {
        newArry.push(temp[k])
      }
      return newArry
    },
    // 选择付款方式
    hanldeChangePay(index) {
      let item = this.payMethodsList[index]
      this.paymentNo = item.no
      this.paymentName = item.name
      this.chooseList = JSON.parse(JSON.stringify(item))
      this.itemNo = item.no
      console.log(this.itemNo)
      // 查询积分
      if (this.paymentNo === '003') {
        this.getVipIntegral()
      }
    },
    // 密码正确的回调
    handlePasswordCorrect(status) {
      this.isPasswordCorrect = status
      this.handleClosePassword()
      this.hanldeContinueClick()
    },
    // 清空
    hanldeEmpty() {
      this.paymentName = ''
      this.paymentMoney = ''
      this.choosePayMethodsList = []
      this.tempPyMethodsList = []
    },
    // 关闭密码页面
    handleClosePassword() {
      this.isPassword = !this.isPassword
    },
    handleCloseInvoicing() {
      this.$emit('handleCloseInvoicing')
    }
  }
}
</script>

<style scoped>
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  z-index: 99;
}
.checkoutMain {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  z-index: 99;
  background-color: white;
  overflow: auto;
  padding-bottom: 1.5vh;
}
.checkoutMain > div:first-child {
  justify-content: space-between;
  padding: 10px 15px;
  background: #f4f4f4;
  font-weight: 700;
}

p {
  white-space: nowrap;
}
.checkoutMain > div {
  display: flex;
}

.checkoutMain > div:not(:first-child) {
  margin: 1.5vh 1vw 0;
}
.money {
  background: #f2f5fa;
  border-radius: 5px;
  padding: 1.5vh 1vw;
}
.money span {
  flex-grow: 1;
  text-align: center;
}
.money p:first-child {
  font-size: 2.5vh;
}

.pay p {
  margin-right: 0.5vw;
}

.table > div {
  display: flex;
  text-align: center;
}
.table > div:first-child {
  margin-right: 1vw;
}
.table div {
  flex-grow: 1;
}
.table p {
  border: 1px solid #f0f0f0;
  line-height: 4vh;
}
.table p:first-child {
  border-bottom: none;
  background: #f8f8f8;
  font-weight: bolder;
}

.btn {
  float: right;
}

.w160 {
  width: 160px;
  margin-right: 0.5vw;
}

.blue {
  color: #409eff;
}
</style>

<style>
.checkoutMain .el-input__inner {
  height: 30px !important;
}
.checkoutMain .el-input__icon {
  line-height: 30px !important;
}
</style>
